<template>
  <div class="container">
    <filtrate :fetchData="fetchData"></filtrate>
    <div class="content">
      <h4><span style="float: left;color: #20a0ff;cursor: pointer;margin-left:20px;" @click="exportData">导出数据</span>外派机构</h4>
      <div id="myChart" style="width:100%;height:600px"></div>
    </div>
  </div>
</template>
<script>
import filtrate from "../filtrate";

export default {
  data() {
    return {
      myChart: {},
      option: {
        color: ["#0177BF"],
        title: {
          text: ""
        },
        tooltip: {},
        toolbox: {
          show: true,
          right: 20,
          feature: {
            saveAsImage: {
              //保存图片
              show: true
            }
          }
        },
        legend: {
          data: ["人数"]
        },
        xAxis: {
          name: "外派机构",
          data: [],
          axisLabel: {
            interval: 0,
            // formatter:function(value)  
            // {  
            //   var ret = "";//拼接加\n返回的类目项  
            //   var maxLength = 4;//每项显示文字个数  
            //   var valLength = value.length;//X轴类目项的文字个数  
            //   var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
            //   if (rowN > 1)//如果类目项的文字大于3,  
            //   {  
            //       for (var i = 0; i < rowN; i++) {  
            //           var temp = "";//每次截取的字符串  
            //           var start = i * maxLength;//开始截取的位置  
            //           var end = start + maxLength;//结束截取的位置  
            //           //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
            //           temp = value.substring(start, end) + "\n";  
            //           ret += temp; //凭借最终的字符串  
            //       }  
            //       return ret;  
            //   }  
            //   else {  
            //       return value;  
            //   }  
            // } 
          }
        },
        yAxis: {
          name: "单位：人次",
          minInterval: 1
        },

        series: [
          {
            name: "人数",
            type: "bar",
            barMaxWidth: 20,
            data: []
          }
        ],
        label: {
          normal: {
            show: true,
            position: "top"
          }
        },
        textStyle: {
          color: "#333"
        }
      }
    };
  },
  components: {
    filtrate
  },
  methods: {
      exportData(){
          let filData = Lockr.get("filData");
          if (filData) {
              var data = {
                  time: filData.time,
                  courseType: filData.courseType
              };
          } else {
              var data = {
                  time:  "",
                  courseType:  "",
                  new: this.value
              };
          }
          axios.post(PATH + "Dashboard/customerDailiexport", data).then(res => {
              if(res.data.error == '0'){
                  window.location.href =  SITE1+res.data.msg;
              }else{
                  _g.toastMsg('error',res.data.msg);
              }
          });
      },
    fetchData(time, type) {
      if (this.myChart.showLoading) {
        this.myChart.showLoading("default", { color: "#0177BF" });
      }
      let data = {
        time: time ? time : "",
        courseType: type ? type : ""
      };
      axios.post(PATH + "Dashboard/customerDaili", data).then(res => {
        this.myChart.hideLoading();        
        if(!res.data.xaxis.length){
          _g.toastMsg('normal','暂无数据');
        }
        let end = 100;
        if (res.data.xaxis.length > 6) {
          end = parseInt(6 / res.data.xaxis.length * 100);
          
        }
        this.myChart.setOption({
          grid: {
            bottom: "15%"
          },
          xAxis: {
            data: res.data.xaxis
          },
          series: [
            {
              data: res.data.yaxis
            }
          ],
          dataZoom: [
            {
              type: "slider",
              start: 0,
              end: end
            }
          ]
        });
      });
    },
    drawChart() {
      this.myChart = this.$echarts.init(document.querySelector("#myChart"));
      this.myChart.setOption(this.option);
    },
  },
  created() {
    let filData = Lockr.get("filData");
    if (filData) {
      this.fetchData(filData.time, filData.courseType);
    } else {
      this.fetchData();
    }
  },
  mounted() {
    this.drawChart();
    this.myChart.showLoading("default", { color: "#0177BF" });
    this.myChart.on("click", params => {
      router.push("/dashboard/customerDailiDetail/" + params.name);
    });
  }
};
</script>
<style scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  font-size: 14px;
  overflow: hidden;
}
.content > h4 {
  text-align: center;
  border-bottom: 1px solid #f0f2f3;
  line-height: 40px;
}
#myChart {
  margin: 50px auto;
}
</style>
